<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<div class="page-header">
	<h3>产品列表</h3>
</div>
<table class="table table-striped table-hover .table-condensed">
	<thead>
		<tr>
			<th>名称</th>
			<th>UUID</th>
			<th>描述</th>
			<th>编辑时间</th>
			<th>部门</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<c:if test="${result.success eq false}">获取数据失败</c:if>
		<c:if test="${result.success eq true}">
			<c:forEach var="product" items="${result.object.list}">
				<tr>
					<td>${fn:escapeXml(product.name)}</td>
					<td>${fn:escapeXml(product.uuid)}</td>
					<td>${fn:escapeXml(product.description)}</td>
					<td><fmt:formatDate value="${product.date}" type="both"
							pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td>${fn:escapeXml(product.department.name)}</td>
					<td><a class="btn btn-default editProduct" pid="${product.id}"
						pname="${fn:escapeXml(product.name)}"
						pdescription="${fn:escapeXml(product.description)}"
						did="${product.department.id}">修改</a> <a
						class="btn btn-default delProduct" pid=${product.id}>删除</a></td>
				</tr>
			</c:forEach>
		</c:if>
	</tbody>
</table>
<div id="layPage" class="text-center"></div>
<div id="editPanel" class="panel panel-default"
	style="display: none; margin-bottom: 0; width: 300px;">
	<div class="panel-heading">
		<h3 class="panel-title">修改名称</h3>
	</div>
	<div class="panel-body">
		<form role="form">
			<div class="form-group">
				<input name="id" type="text" hidden="hidden" /> <label for="name">产品名称</label><input
					name="name" type="text" class="form-control" id="name" /><br /> <label
					for="description">产品描述</label>
				<textarea name="description" class="form-control" rows="4"
					style="resize: none;"></textarea>
				<br /> <label for="name">所属部门</label> <select name="department"
					class="form-control">
				</select>
			</div>
			<br /> <input name="submit" type="submit" value="确认"
				class="btn btn-default pull-right" />
		</form>
	</div>
</div>
<script>
	function departmentOption(id, name) {
		return '<option id="' + id + '">' + name + '</option>';
	}
	$(function() {
		
		//分页插件
		laypage({
		    cont: 'layPage',
		    pages: '${result.object.pages}',
		    curr: '${result.object.pageNum}',
		    jump: function(obj,first){
		    	if(!first){
		    		$("#rightDiv").load("${basePath}/product/list?pageNum=" + obj.curr);
		    	}
		    }
		})
		//获取所有的部门列表
		$.get("${basePath}/product/department/all", function(data) {
			var list = data.result.object;
			if (data.result.success == true) {
				for ( var i in list) {
					$("select[name=department]").append(
							departmentOption(list[i].id, list[i].name));
				}
			}
		});
		$(".editProduct").click(function() {
			$("input[name=id]").val($(this).attr("pid"));
			$("input[name=name]").val($(this).attr("pname"));
			$("textarea[name=description]").val($(this).attr("pdescription"));
			$("option#" + $(this).attr("did")).attr("selected", true);
			window.editLayer = layer.open({
				type : 1,
				title : false,
				closeBtn : 1,
				shadeClose : true,
				content : $('#editPanel')
			});
		});
		$("form")
				.submit(
						function(e) {
							var id = $("input[name=id]").val();
							var name = $("input[name=name]").val();
							var description = $("textarea[name=description]")
									.val();
							var departmentId = $(
									"select[name=department] :selected").attr(
									"id");
							if (name == null || name == "") {
								layer.tips('名称不能为空', 'input[name=name]', {
									tips : 3
								});
							} else if (description == null || description == "") {
								layer.tips('描述不能为空',
										'textarea[name=description]', {
											tips : 3
										});
							} else {
								$
										.post(
												"${basePath}/product/update",
												{
													id : id,
													name : name,
													description : description,
													departmentId : departmentId
												},
												function(data) {
													if (data.result.success) {
														layer
																.msg(
																		data.result.message,
																		{
																			icon : 1,
																			time : 1000
																		},
																		function() {
																			layer
																					.close(editLayer);
																			$(
																					"#rightDiv")
																					.load(
																							"${basePath}/product/list?pageNum=${result.object.pageNum}");
																		});
													} else if (data.result.message == "产品名已存在") {
														layer
																.tips(
																		data.result.message,
																		'input[name=name]',
																		{
																			tips : 3
																		});
													} else {
														layer
																.msg(
																		data.result.message,
																		{
																			icon : 2
																		});
													}
												});
							}
							return false;
						});
		$(".delProduct").click(function() {
			var deleteId = $(this).attr("pid");
			layer.confirm('确定要删除', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.post("${basePath}/product/delete", {
					id : deleteId
				}, function(data) {
					if (data.result.success) {
						layer.msg(data.result.message, {
							icon : 1,
							time : 1000
						}, function() {
							$("#rightDiv").load("${basePath}/product/list");
						});
					} else {
						layer.msg(data.result.message, {
							icon : 2
						});
					}
				});
				layer.close(index);
			});
		});
	});
</script>